<template>
	<view class="content">
		<navgate-bar-vue :isBack="true" title="注册"></navgate-bar-vue>

		<view class="login_img" @click="handleChooseImage">
			<image mode="aspectFill" :src="imageValue.length ? imageValue[0].url : '/static/images/moren.jpeg'" />
			<view v-if="uploading" class="upload-mask">上传中...</view>
		</view>
		<view class="login_from">

			<view class="login_from_input">
				<view class="login_from_name">学号</view>
				<view class="login_from_fun"><input v-model="listData.username" type="number" placeholder="请输入11位数字学号">
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">昵称</view>
				<view class="login_from_fun"><input v-model="listData.nickname" type="digit" placeholder="请输入昵称"></view>
			</view>


			<view class="login_from_input">
				<view class="login_from_name">学院</view>
				<view class="login_from_fun"><input v-model="listData.college" type="digit" placeholder="请输入学院"></view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">年级</view>
				<view class="login_from_fun"><input v-model="listData.grade" type="digit" placeholder="请输入年级"></view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">班级</view>
				<view class="login_from_fun"><input v-model="listData.userClass" type="digit" placeholder="请输入班级">
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">邮箱</view>
				<view class="login_from_fun"><input v-model="listData.contactInfo" type="digit" placeholder="请输入邮箱">
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">性别</view>
				<view class="login_from_fun">
					<radio-group :value="listData.sex" @change="handleSexChange" class="radio-group">
						<label class="radio-label">
							<radio :value="'0'"> 男 </radio>
						</label>
						<label class="radio-label">
							<radio :value="'1'"> 女 </radio>
						</label>
					</radio-group>
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">密码</view>
				<view class="login_from_fun"><input v-model="listData.password" type="password" password="true"
						placeholder="请输入密码"></view>
			</view>
			<view class="login_from_dl">
				<button @click="handleRegister">注册</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		AppUploadFileApi
	} from "@/api/upload";
	import {
		AppRegisterApi
	} from '@/api/register';

	const imageValue = ref([]);

	//注册数据
	const listData = ref({
		username: '',
		nickname: '',
		realName: '',
		college: '',
		grade: '',
		userClass: '',
		contactInfo: '',
		avatarUrl: '',
		password: '',
		sex: ''
	})

	const handleSexChange = (event) => {
		listData.value.sex = event.detail.value;
	};


	const handleRegister = async () => {
		// 学号校验
		if (!/^\d{11}$/.test(listData.value.username)) {
			uni.showToast({
				title: '请输入正确的学号（11位数字）',
				icon: 'none'
			});
			return;
		}

		// 其他字段不能为空的校验
		if (!listData.value.nickname.trim()) {
			uni.showToast({
				title: '昵称不能为空',
				icon: 'none'
			});
			return;
		}

		if (!listData.value.college.trim()) {
			uni.showToast({
				title: '学院不能为空',
				icon: 'none'
			});
			return;
		}

		if (!listData.value.grade.trim()) {
			uni.showToast({
				title: '年级不能为空',
				icon: 'none'
			});
			return;
		}

		if (!listData.value.userClass.trim()) {
			uni.showToast({
				title: '班级不能为空',
				icon: 'none'
			});
			return;
		}

		if (!listData.value.avatarUrl.trim()) {
			uni.showToast({
				title: '头像不能为空',
				icon: 'none'
			});
			return;
		}

		if (!listData.value.contactInfo.trim()) {
			uni.showToast({
				title: '邮箱不能为空',
				icon: 'none'
			});
			return;
		}

		if (!listData.value.password.trim()) {
			uni.showToast({
				title: '密码不能为空',
				icon: 'none'
			});
			return;
		}

		try {
			// 调用注册 API
			const response = await AppRegisterApi(listData.value);
			if (response.msg === "用户名已经存在") {
				uni.showToast({
					title: '用户名已经存在',
					icon: 'error'
				});
			} else if (response.msg === "success") {
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				});
				// 可选：注册成功后跳转页面
				uni.navigateTo({
					url: '/pages/login/index'
				});

			}

		} catch (error) {
			console.error('注册失败', error);
			uni.showToast({
				title: '注册失败，请重试',
				icon: 'none'
			});
		}
	};

	const uploading = ref(false);

	// 图片选择与上传逻辑
	const handleChooseImage = async () => {
		try {
			const res = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera']
			});

			const tempFilePath = res.tempFilePaths[0];
			imageValue.value = [{
				url: tempFilePath
			}];

			uploading.value = true;
			const uploadRes = await AppUploadFileApi(tempFilePath);

			if (uploadRes && uploadRes.data && uploadRes.data) {
				listData.value.avatarUrl = uploadRes.data;
				uni.showToast({
					title: '头像上传成功',
					icon: 'success'
				});
			} else {
				throw new Error("上传失败，服务器返回的数据不正确");
			}
		} catch (error) {
			uni.showToast({
				title: '上传失败，请重试',
				icon: 'none'
			});
			console.error('上传错误:', error);
		} finally {
			uploading.value = false;
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 50upx;
	}

	.login_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 14px;
	}


	.login_from_dl {
		width: 100%;
		height: 50px;
		line-height: 50px;
	}

	.login_from_dl button {
		margin-top: 20rpx;
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #4796e8;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #FF3B00;
	}

	.logo_text text {
		color: #FF3B00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #FF3B00;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #FF3B00;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	:deep(.file-picker__box-content) {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 5px;
		border: none;
		border-radius: 5px;
		overflow: hidden;
	}

	.radio-group {
		display: flex;
		align-items: center;
	}

	.radio-label {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}
</style>